<template>
	<view class="container">
		<!-- 余额/积分展示区 -->
		<section class="balance-section">
			<div class="balance-item">
				<p>余额</p>
				<h2>¥{{userWalletInfo.money||'0.00'}}</h2>
			</div>
			<div class="balance-item">
				<p>积分</p>
				<h2>{{userWalletInfo.point||'0'}}</h2>
			</div>
		</section>

		<!-- 记录按钮区 -->
		<div class="record-buttons">
			<button class="record-button">余额记录</button>
			<button class="record-button">积分记录</button>
		</div>

		<!-- 每日奖励模块 -->
		<section class="daily-rewards">
			<h2>每日奖励</h2>

			<!-- 签到 -->
			<div class="reward-item">
				<div class="reward-title">
					<p>签到</p>
					<span>签到奖励 10 积分</span>
				</div>
				<div class="reward-action">
					<span>+10</span>
					<button>去签到</button>
				</div>
			</div>

			<!-- 发布 -->
			<div class="reward-item">
				<div class="reward-title">
					<p>购买</p>
					<span>购买商品奖励 50 积分</span>
				</div>
				<div class="reward-action">
					<span>+50</span>
					<button>去购买</button>
				</div>
			</div>

			<!-- 浏览 -->
			<div class="reward-item">
				<div class="reward-title">
					<p>浏览</p>
					<span>浏览商品奖励 10 积分</span>
				</div>
				<div class="reward-action">
					<span>+10</span>
					<button>去浏览</button>
				</div>
			</div>

			<!-- 评论 -->
			<div class="reward-item">
				<div class="reward-title">
					<p>评论</p>
					<span>发布评论奖励 5 积分</span>
				</div>
				<div class="reward-action">
					<span>+5</span>
					<button>去评论</button>
				</div>
			</div>
		</section>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	export default {
		data() {
			return {
				userWalletInfo: {
					money: '',
					point: '',
				},
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserWalletInfo();
		},
		methods: {
			getUserWalletInfo() {
				api.userWalletInfo().then(res => {
					if (res.code == 200) {
						this.userWalletInfo = res.data;
					}
				});
			},
		}
	}
</script>

<style scoped>
	/* 全局样式 */
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	h1 {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin: 0 auto;
	}

	/* 余额/积分展示 */
	.balance-section {
		display: flex;
		justify-content: space-around;
		padding: 24px 0;
		margin: 16px;
		background-color: #66b3ff;
		border-radius: 8px;
		color: white;
	}

	.balance-item {
		text-align: center;
	}

	.balance-item p {
		font-size: 14px;
		margin-bottom: 8px;
	}

	.balance-item h2 {
		font-size: 24px;
		font-weight: bold;
		margin: 0;
	}

	/* 记录按钮 */
	.record-buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 16px;
		margin-bottom: 24px;
	}

	.record-button {
		flex: 1;
		padding: 12px 0;
		margin: 0 8px;
		background-color: #f2f2f2;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		font-size: 16px;
		line-height: 30upx;
		color: #333;
	}

	/* 每日奖励 */
	.daily-rewards {
		padding: 0 16px;
	}

	.daily-rewards h2 {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 16px;
	}

	.daily-rewards h2::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #66b3ff;
		margin-right: 8px;
	}

	/* 奖励项 */
	.reward-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		margin-bottom: 8px;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.reward-title p {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin: 0 0 4px 0;
	}

	.reward-title span {
		font-size: 14px;
		color: #666;
	}

	.reward-action {
		display: flex;
		align-items: center;
	}

	.reward-action span {
		font-size: 18px;
		color: #66b3ff;
		margin-right: 16px;
	}

	.reward-action button {
		padding: 8px 16px;
		background-color: #66b3ff;
		border: none;
		border-radius: 8px;
		color: white;
		font-size: 14px;
		cursor: pointer;
		line-height: 50upx;
	}
</style>